<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>商品详请</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../css/index.css" />
		<link rel="stylesheet" type="text/css" href="../css/style.css" />
		<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/vant.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/ajax.js" type="text/javascript" charset="utf-8"></script>
		<script src="html5plus://ready"></script>
		<script src="../js/back.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			#nav {
				position: fixed;
				top: 0;
				margin-bottom: 5px;
			}

			#img {
				width: 100%;
			}

			#img-style {
				margin-top: 24px;
			}

			#txt-padding {
				padding: 10px;
			}

			#b-font {
				font-size: 18px;
			}

			#label {
				text-align: center;
				padding: 10px 10px 10px 0px;
				margin-left: -14px;
				background-color: #E8E8E8;
			}

			#commodity {}

			#commit-txt {
				padding: 10px;
				margin-top: 10px;
			}

			script {
				margin-top: 10px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<header style="background-color: red;">
				<van-row>
					<van-col span="4">
						<span v-on:click="back" style="color: white;">
							<返回</span> </van-col> <van-col span="17">
								<span style="color: white;">商品详情</span>
					</van-col>
				</van-row>
			</header>
			<!--头部结束-->


			<section>
				<van-swipe :autoplay="3000" indicator-color="white" id="img-style"  >
					<!-- 轮播图开始 -->
							<van-swipe-item v-for="(img, index) in imgs">
									<img :src="img.src" onerror="javascript:this.src='../img/product_default.jpg';" style="width: 100%;">
									
								</van-swipe-item>
							<!-- <van-swipe-item><img src="../img/d_3.jpg" id="img"></van-swipe-item>
							<van-swipe-item><img src="../img/d_2.jpg" id="img"></van-swipe-item>
							<van-swipe-item><img src="../img/d_3.jpg" id="img"></van-swipe-item> -->
							
				</van-swipe><!-- 轮播图结束 -->
				<hr />
				<van-row>
					<!-- 商品名称开始 -->
					<van-col span="24" id="txt-padding">
						<b id="b-font">{{name}} </b>
					</van-col>
				</van-row><!-- 商品名称结束 -->

				<van-row>
					<!-- 价格 -->
					<van-col span="24" id="txt-padding">
						<b id="b-font" style="color: red;">￥:{{price}}</b>
					</van-col>
				</van-row><!-- 价格结束 -->

				<van-row>
					<!-- 运费开始 -->
					<van-col span="8" id="txt-padding" style="color: #969799;">
						快递：免运费
					</van-col>
					<van-col span="7" id="txt-padding" style="color: #969799;">
						销量：{{SaleCount}}
					</van-col>
					<van-col span="9" id="txt-padding" style="color: #969799;">
						浏览量：{{BrowseCount}}
					</van-col>
				</van-row><!-- 运费结束 -->

				<van-row id="label">
					<!-- 商品标签开始 -->
					<van-col span="8" style="color: red;">
						☞正品保证
					</van-col>
					<van-col span="8" style="color: red;">
						☞急速退款
					</van-col>
					<van-col span="8" style="color: red;">
						☞两天内发货
					</van-col>
				</van-row><!-- 商品标签结束 -->

				<div id="commodity">
					<!-- 商品详情开始 -->
					<van-row>
						<van-col span="24" id="commit-txt">
							商品详情
						</van-col>
						<van-col span="24" id="commit-txt">
							<img src="../img/d_1.jpg" style="width: 100%;">
							<img src="../img/dt_2.png" style="width: 100%;">
							<img src="../img/dt_3.png" style="width: 100%;">
							<img src="../img/dt_4.png" style="width: 100%;">
							<img src="../img/dt_5.png" style="width: 100%;">
						</van-col>
					</van-row>
				</div><!-- 商品详情结束 -->
			</section>

			<footer>
				<van-goods-action>
					<van-goods-action-mini-btn 
					v-bind:icon="vm.likes" 
					v-bind:text="text"
					color="red"
					 v-show="true"
					@click="like">
					</van-goods-action-mini-btn>

					<van-goods-action-big-btn text="加入购物车" @click="addcart">
						
					</van-goods-action-big-btn>
					<van-goods-action-big-btn primary text="立即购买"  @click="GouMai">
						
					</van-goods-action-big-btn>
				</van-goods-action>

			</footer>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el: "#app",
				data: {
					ys:"yellow",
					text:"收藏",
					likes:"like-o",
					name: "",
					price: "",
					SaleCount: "",
					BrowseCount: "",
					imgs: [],
					show:""
					
				},
				mounted() {
					var a = plus.webview.currentWebview();
					this.name = a.lisname;
					this.SaleCount = a.liscount;
					this.price = a.lisprice;
					this.BrowseCount = a.BrowseCount;					
					ajax({						
						url: "http://dsapi.ysd3g.com/API/GoodsDetail",
						dataType: "jsonp",
						data: {
							gId: a.nId
						},
						success: function(res) {
							var _this=this;
							vm.imgs = res.Detail.SwipeImages;
							vm.Goodsdetail=res.Detail;							
						}
					});
					
				},
				
				methods: {					
					back: function() {
						var arr = plus.webview.currentWebview(); //获取当前视图
						plus.webview.close(arr,"slide-out-right"); //关闭当前视图
					},
					GouMai: function() {	//点击购买
						var _this=this;
						if(localStorage.getItem("keys")==null){
							vm.$dialog.confirm({
							  title: '未登录',
							  message: '还未登录，是否去登录'
							}).then(() => {
							  plus.webview.create("../presoanl/login.html","login");
							  plus.webview.show("login","slide-in-right")
							}).catch(() => {
							  vm.$toast("取消登录")
							});
						}else{
							var a = plus.webview.currentWebview();
							var _this=this;
							localStorage.setItem("spname",_this.name);						
							localStorage.setItem("goumaiprice",_this.price);
							localStorage.setItem("payid",a.nId);
							plus.webview.create("payment.html", "pay");
							plus.webview.show("pay","slide-in-right");
						}
						
					},
					like(){
						var a = plus.webview.currentWebview();						
						ajax({
							url: "http://dsapi.ysd3g.com/API/CollectGoods",
							dataType: "jsonp",
							data: {
								goodsId:a.nId,		//传id
								key:localStorage.getItem("keys")   //传key
							},
							success: function(res) {
								if(res.Error==false){
									vm.$toast.success("收藏成功");
									vm.likes="like";
									vm.text="已收藏";
									
									console.log(res);
								}else{				//取消收藏开始
									ajax({
										url: "http://dsapi.ysd3g.com/api/cancelCollectGoods",
										dataType: "jsonp",
										data: {
											goodsId:a.nId,		//传id
											key:localStorage.getItem("keys")   //传key
										},
										success: function(res) {
											if(res.Error==false){
												vm.$toast.success("取消收藏");
												vm.likes="like-o";
												vm.text="收藏"
												
												console.log(res);
											}else{
												vm.$toast.fail(res.Msg);
											};
										}
									});
								};
							}
						});
					},
					addcart(){
						var _this=this;
						if(localStorage.getItem("keys")==null){
							vm.$dialog.confirm({
							  title: '未登录',
							  message: '还未登录，是否去登录'
							}).then(() => {
							  plus.webview.create("../presoanl/login.html","login");
							  plus.webview.show("login","slide-in-left")
							}).catch(() => {
							  vm.$toast("取消登录")
							});
						}else{
							var a = plus.webview.currentWebview();
							_this.id = a.nId;							
							localStorage.setItem(_this.id,JSON.stringify(_this.Goodsdetail)); 
							console.log(_this.id);
							_this.$toast.success("加入购物车成功");						
							plus.webview.getWebviewById("gwc").reload(true);
						}						
					}					
				}
			})
		</script>
	</body>
</html>
